<template>
  <div class="home">
    <div class="wrap">
      <h2 class="title">TodoList</h2>
      <el-card class="box-card">
        <div slot="header" class="header">
          <el-input class="inpt" v-model="val" placeholder="请输入内容" @keyup.enter.native="add"></el-input>
          <el-button type="text" @click.native="add">添加</el-button>
        </div>
        <div>
          <div class="tab-header">
            <el-radio-group v-model="tabPosition">
              <el-radio-button label="0">全部</el-radio-button>
              <el-radio-button label="1">完成</el-radio-button>
              <el-radio-button label="2">未完成</el-radio-button>
            </el-radio-group>
          </div>
          <ul class="list" v-if="getList.length > 0">
              <li class="item" v-for="(item, index) in getList" :key="index">
                  <span @click="change(item.id)" :style="{'text-decoration': item.finished ? 'line-through' : 'none'}">{{item.val}}</span>
                  <el-button @click="deleteItem(item.id)" type="primary" size="mini">删除</el-button>
              </li>
          </ul>
          <div class="none" v-else>
              暂无内容
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import {mapState,mapMutations} from 'vuex'
export default {
  data() {
    return {
      val: "",
      tabPosition: 0
    }
  },
  computed: {
      //获取state的方法1：
      ...mapState([
          'lists'
      ]),
      getList() {
         if(this.tabPosition == 0) {
              //获取state的方法2：
             return this.$store.state.lists
         }else if(this.tabPosition == 1) {
             return this.lists.filter(item => item.finished )
         }else {
             return this.lists.filter(item => !item.finished )
         }
      }
  },
  methods: {
      ...mapMutations([
          'deleteItem',
          'change'
      ]),
      add() {
          this.$store.commit('add', this.val)
          this.val = ''
      }
  }
}
</script>
<style>
.wrap {
  width: 320px;
  display: flex;
  margin: 0 auto;
  flex-direction: column;
}
.title {
  padding: 30px 0;
  text-align: center;
  font-size: 24px;
  font-weight: 600;
}
.header {
  display: flex;
  align-items: center;
}
.inpt {
  margin-right: 15px;
}
.tab-header {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
}
.list {
    display: flex;
    flex-direction: column;
}
.item {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #eee;
    padding: 8px 0;
}
.item span {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.none {
    padding: 15px 0;
    text-align: center;
}
.finished {
    text-decoration: line-through;
}
</style>